<template>
  <div class="default-layout">
    <!-- 使用NavBar组件 -->
    <NavBar />

    <!-- 内容部分使用插槽 -->
    <main class="main-content w-full relative">
      <slot></slot>
    </main>

    <!-- 引入页脚组件 -->
    <MyFooter />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import NavBar from '@/components/NavBar.vue'
import MyFooter from '@/components/MyFooter.vue'

onMounted(() => {
  // 如果不是首页，触发导航栏显示
  if (window.location.pathname !== '/') {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('showNavigation'))
    }, 100)
  }
})
</script>

<style scoped>
.default-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: var(--viewport-width);
  overflow: visible; /* 修复：从hidden改为visible，解决ScrollTrigger标记问题 */
  box-sizing: border-box;
  position: static; /* 修复：确保位置不影响ScrollTrigger */
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: var(--viewport-width);
  position: static; /* 修复：从relative改为static，解决ScrollTrigger定位问题 */
  z-index: 1;
  overflow: visible; /* 允许内容正常流动 */
  min-height: 100vh;
  box-sizing: border-box;
}
</style>
